<template>
  <div class="css2_9">
      <h1>2.9 用户界面</h1>
      <h2>Resize</h2>
      <table border="1px">
        <tr>
          <th>值</th>
          <th>描述</th>
        </tr>
        <tr>
          <td>none</td>
          <td>用户无法调整元素的尺寸。</td>
        </tr>
        <tr>
          <td>both</td>
          <td>用户可调整元素的高度和宽度。</td>
        </tr>
        <tr>
          <td>horizontal</td>
          <td>用户可调整元素的宽度。</td>
        </tr>
        <tr>
          <td>vertical</td>
          <td>用户可调整元素的高度。</td>
        </tr>
      </table>
      <p>
        <pre>
          实例：
div
{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:both;//用户可调整元素的高度和宽度。
overflow:auto;
}
        </pre>
      </p>
      <video src="../assets/c3实例视频/resize both.mp4" width="600px" controls></video>
        <img src="../assets/images/3.59.png" alt="">
        <p></p>
        <p>
          <pre>
            div
{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:horizontal;//用户可调整元素的宽度。
overflow:auto;
}
          </pre>
        </p>
      <video src="../assets/c3实例视频/resize horizontal.mp4" width="600px" controls></video>
      <h2>box-sizing</h2>
      <table border="1px">
        <tr>
          <th>值</th>
          <th>描述</th>
        </tr>
        <tr>
          <td>content-box</td>
          <td>这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。（默认值）</td>
        </tr>
        <tr>
          <td>border-box</td>
          <td>为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。</td>
        </tr>
        <tr>
          <td>inherit</td>
          <td>规定应从父元素继承 box-sizing 属性的值。</td>
        </tr>
      </table>
      <p>
        <pre>
          实例：此时未设置box-sizing属性，则盒子为默认的content-box
div {
            background-color: gray;
            width: 100px;
            height: 100px;
            border: 10px solid red;
padding: 10px;
        }
        </pre>
      </p>
        <img style="width:300px" src="../assets/images/3.60.png" alt="">
        <img style="width:400px;margin-left:0px" src="../assets/images/3.61.png" alt="">
        <p></p>
        <p>当加上box-sizing: border-box;时，可以看到内边距和边框都将在已设定的宽度和高度内进行绘制</p>
        <img style="width:300px" src="../assets/images/3.62.png" alt="">
        <img style="width:300px;margin-left:0px" src="../assets/images/3.63.png" alt="">
        <p></p>
        <p>
          <pre>
            outline-offset
实例：规定边框边缘之外 15 像素处的轮廓
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
          </pre>
        </p>
        <img src="../assets/images/3.64.png" alt="">
        <p></p>
        <p>
          <pre>
            轮廓在两方面与边框不同：
轮廓不占用空间
轮廓可能是非矩形
          </pre>
        </p>
        <table border="1px">
          <tr>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>length</td>
            <td>轮廓与边框边缘的距离。</td>
          </tr>
          <tr>
            <td>inherit</td>
            <td>规定应从父元素继承 outline-offset 属性的值。</td>
          </tr>
        </table>
        <p>
          <pre>
            resize 属性，规定用户可以通过拉伸元素尺寸来显示溢出隐藏的内容。效果类似 &lt;textarea>&lt;/textarea> 文本域标签。
可以说 &lt;textarea> 标签自带 resize: both；所以可以通过设置 resize: none; 来禁止 &lt;textarea> 的尺寸被拉伸。
但是，值得注意的是溢出形式的设置：
1. 当 overflow: hidden; 时，无论是否拉伸尺寸，超出尺寸的内容都会被隐藏裁剪；
2. 当 overflow: scroll; 时，无论是否拉伸尺寸，元素始终显示滚动条；
3. 当 overflow: auto; 时，仅尺寸小于内容显示时，才会出现滚动条，可以说，这是最美观的设置（&lt;textarea> 也是自带此属性）；
----------------------------------------------------------------------------------
outline-offset 属性用来设置轮廓（外边框）与边框（内边框）之间的间隔，或 “填充”，默认情况下，轮廓是紧贴着边框的，所以需要通过该属性来使它们分开。
outline 不会破坏元素宽高，同样的 outline-offset 设置的间隔，也不会影响元素的宽高。
----------------------------------------------------------------------------------
box-sizing 用来告诉浏览器该使用哪种盒模型来渲染文档。
content-box 是默认的盒子模型，即 W3C 标准盒子模型，现如今所有主流浏览器都支持并使用该模型渲染布局，包括 IE。但麻烦却是一堆堆的，因为，在这模型下，border与padding的设置会破坏元素的尺寸，导致最终展现出来的布局效果并不符合理想效果，而如果想要达到理想效果，又需要去计算宽高，非常麻烦。
（别的属性是越标准越好用，但这个属性却是反向向IE标准的）
而 border-box 则指 IE盒子模型，也称为“怪异盒子模型”。此模型下，边框和填充并不会影响元素的宽高，相当于是将元素的空间霸占成自己的空间，元素总体大小不变，内容空间变小，边框、填充则霸占着原本属于内容空间的地方。这在平时设计布局时，就非常的舒服，因为在指定元素尺寸并设置该属性值后，元素尺寸就不会因被破坏而又得重新计算了。
          </pre>
        </p>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>